<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
  integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
</script>
<style>

</style>

<body>
  <input type="number" min="0">
  <table class="table table-bordered" id="tab1">
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="goodlist">

    </tbody>
  </table>
  <table class="table table-bordered" id="tab2">
    <thead>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>金额(元)</th>
        <th>删除</th>
      </tr>
    </thead>
    <tbody id="goods">

    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">总计</td>
        <td id="total"></td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</body>
<script>
  $(function () {
    var data = [{
        commodity: '罗技M185鼠标',
        stock: 80,
        color: "黑色",
        price: 892,
        praise: "98%"
      },
      {
        commodity: '微软X470键盘',
        stock: 150,
        color: "黑色",
        price: 9027,
        praise: "96%"
      },
      {
        commodity: '洛克iphone6手机壳',
        stock: 60,
        color: "透明",
        price: 671,
        praise: "99%"
      },
      {
        commodity: '蓝牙耳机',
        stock: 100,
        color: "蓝色",
        price: 8936,
        praise: "95%"
      },
      {
        commodity: '金士顿u盘',
        stock: 70,
        color: "红色",
        price: 481,
        praise: "100%"
      },
    ]
    fun(data)
    //   $("#shopping").click(function(){
    //   console.log(123);
    // })
  })


  function fun(data) {

    var str = ""
    for (i in data) {
      str +=
        `<tr>
            <td>${data[i].commodity}</td>
            <td>${data[i].stock}</td>
            <td>${data[i].color}</td>
            <td>${data[i].price}</td>
            <td>${data[i].praise}</td>
            <td><button class="btn btn-info bun" value="${i}" onclick="addshoping(this)">加入购物车</button></td>
          </tr>`
    }
    $("table:first tbody").html(str)
  }

  function addshoping(btn) {
    console.log(123);
    var arr = []
    var names = $(btn).parent().siblings().eq(0).html()
    console.log(names);
    var price = $(btn).parent().siblings().eq(1).html()
    var trs = $("#goods tr")
    var namesArr = []
    $.each(trs, function (index, value) {
      namesArr.push($(this).children("td").eq(0).text())
    })
    console.log(namesArr);
    arr.push(names)
    console.log(arr);
    var _tr =
      `
   <tr>
        <td>${names}</td>
        <td>${price}</td>
        <td> <button onclick="append(this)">+</button><input type="number" min="0" value="1" onblur="inputval(this)"><button  onclick="reduce(this)">—</button></td>
        <td>${price}</td>
        <td><button class="btn btn-info bun" onclick="del(this)">删除</button></td>
      </tr>
   `

    //  $("table:eq(1) tbody").append(_tr);
    var isHasNames = namesArr.indexOf(names)
    console.log(isHasNames);
    if (isHasNames >= 0) {
      var goodcount = trs.eq(isHasNames).children('td').eq(2).children().eq(1).val()
      console.log(goodcount);
      Number.parseInt(goodcount);
      trs.eq(isHasNames).children('td').eq(2).children().eq(1).val(++goodcount)
      var price = trs.eq(isHasNames).children('td').eq(1).html()
      Number.parseInt(price)
      trs.eq(isHasNames).children('td').eq(3).html(goodcount * price);
    } else {
      $("table:eq(1) tbody").append(_tr);
    }
    var stock = $(btn).parent().siblings().eq(3).html()
    console.log(stock);
    Number.parseInt(stock)

    $(btn).parent().siblings().eq(3).html(--stock)
    and()
  }

  function append(obj) {
    console.log(8883333);

    var quantity = Number($(obj).next().val())
    //  console.log(quantity);
    $(obj).next().val(++quantity)
    var price = Number($(obj).parent().siblings().eq(1).html())
    //  console.log(price);
    $(obj).parent().siblings().eq(2).html(quantity * price)
    and()

    var names = $(obj).parent().prev().prev().text()
    if ($(`#goodlist tr td:contains("${names}")`).html() == names) {
      var num = $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html()
      console.log($(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html());
      $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html(+num - 1)
    }

  }

  function reduce(obj) {
    // console.log(888);
    var quantity = Number($(obj).prev().val())
    if (quantity == 1) {
      $(obj).parent().parent().remove()
      and()
      var names = $(obj).parent().prev().prev().text()
      var inputval = +$(obj).prev().val()
      var num = $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html()
      $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html(+num + inputval)

      return
    }
    // console.log(quantity);
    $(obj).prev().val(--quantity)

    var price = Number($(obj).parent().siblings().eq(1).html())
    // console.log(price);
    $(obj).parent().siblings().eq(2).html(quantity * price)
    and()

    var names = $(obj).parent().prev().prev().text()
    if ($(`#goodlist tr td:contains("${names}")`).html() == names) {
      var num = $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html()
      console.log($(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html());
      $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).chtml(+num + 1)
    }
  }

  function inputval(obj) {
    var quantity = Number($(obj).val())
    var price = Number($(obj).parent().siblings().eq(1).html())
    $(obj).parent().siblings().eq(2).html(quantity * price)
    and()

    var names = $(obj).parent().prev().prev().text()
    var inputval = +$(obj).val()
    var num = $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html()
    $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html(+num - inputval)

  }

  function del(obj) {

    $(obj).parent().parent().remove()
    and()
    var names = $(obj).parent().prev().prev().text()
    var inputval = +$(obj).prev().val()
    var num = $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html()
    $(`#goodlist tr td:contains(${names})`).parent().children().eq(3).html(+num + inputval)

    return


    $(obj).parent().parent().remove()
    and()

  }

  function and() {
    // console.log(123);
    var trs = $("#goods tr")
    var num = 0
    for (i = 0; i < trs.length; i++) {
      var sum = trs.eq(i)
      // console.log(trs);
      var money = Number(sum.children().eq(3).html())
      // console.log(money);
      num += Number(money)
    }
    $("#total").html(num)
  }
</script>

</html>